<template>
  <div class="VideoBody">
    <div class="VideoBodyItem" :ref="el => (VideoBodyItem[index] = el)" v-for="(item, index) in list" :key="index">
      <VideoPlayer :videoSrc="item"></VideoPlayer>
    </div>
  </div>
</template>

<script>
import VideoPlayer from '@/components/VideoPlayer/index.vue'
import mp4 from '@/assets/video/video.mp4'
import {gsap} from 'gsap';

export default {
  name: "title",
  data() {
    return {
      list: [mp4, mp4],
      VideoBodyItem: []
    }
  },
  props: {
    active: {
      type: Number,
      default() {
        return 0;
      }
    }
  },
  components: {
    VideoPlayer
  },
  mounted() {
    this.$nextTick(() => {
      this.flipAnimation();
    });
  },
  methods: {
    flipAnimation() {
      const items = this.VideoBodyItem;

      items.forEach((item, i) => {
        gsap.fromTo(item, {rotationX: -90, transformOrigin: "top"}, {
          rotationX: 0,
          duration: 1,
          delay: i * 0.5 // 让元素依次翻转
        });
      });
    },
  }
}
</script>


<style lang="scss" scoped>

.VideoBody {
  width: calc(100% - 20px);
  margin: auto;
  position: relative;
  height: calc(100% - 10px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;

  .VideoBodyItem {
    width: calc(100% - 10px);
    height: calc(50% - 10px);
    position: relative;
  }
}
</style>
